<template>
    <a-layout>
        <a-layout-header>
            {{ title }}
        </a-layout-header>
        <a-layout-content>
            <a-card class="loginCard animate__animated animate__rotateInDownLeft">
                <h2 style="text-align: center;">登录</h2>
                <CustomForm ref="userFormRef" :FormValue="LoginStore.userFormData" :rules="FormRules"
                    :options="FormConfig.options" :labelCol="FormConfig.labelCol" :labelAlign="FormConfig.labelAlign"
                    :layout="FormConfig.layout">
                    <!-- <template #componentSlot>
                        <img class="codeImg" :src="LoginStore.codeSrc" alt="" srcset="" @click="LoginStore.getCode">
                    </template> -->
                    <template #footer>
                        <a-form-item>
                            <a-button block type="primary" :loading="LoginStore.loading"
                                @click="userFormRef.validate(LoginStore.Login)">登录</a-button>
                        </a-form-item>
                    </template>
                </CustomForm>
            </a-card>

        </a-layout-content>
    </a-layout>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import { useLogin } from '@/stores/Login';
import { createComponent, createForm } from '@/utils/CreateForm'
import componentConfig from '@/config/Login'

const title = import.meta.env.VITE_APP_TITLE


const LoginStore = useLogin()
const userFormRef = ref()

const { FormConfig, FormRules } = new createForm(componentConfig)

// LoginStore.getCode()

document.addEventListener('keyup', (e) => {
    if (e.keyCode === 13) {
        userFormRef.value.validate(LoginStore.Login)
    }
})


</script>
<style lang="scss" scoped>
@import url('@/assets/scss/Mobile/Login.scss');
@import url("@/assets/scss/PC/Login.scss");
</style>